<template>
    <el-drawer v-model="drawer" 
    :title="title" 
    :with-header="false" 
    :size="width" 
    :lock-scroll="lockScroll"
    :close-on-press-escape="closeOnPress"
    :show-close="showClose"
    :close-on-click-modal="closeClickModal"
    >
        <div class="header">
            <slot name="top" ></slot>
            <p v-if="closeButton" class="close" @click="closeHandler">×</p>
        </div>
        <div class="content">
            <slot name="content"></slot>
        </div>
        <div class="bottom">
            <slot name="bottom"></slot>
            
        </div>
    </el-drawer>
</template>
<script setup lang='ts'>
import { ref ,defineProps} from 'vue'
const drawer = ref(false)

interface drawer {
    // 抽屉
    title ?: string
    width ?: number 
    lockScroll ?: boolean
    closeOnPress ?: boolean
    showClose ?: boolean
    closeClickModal ?: boolean
    closeButton ?: boolean | false
    // 按钮
    type ?: string
    round ?: boolean
    loading ?: boolean
    icon ?: string
    buttonText ?: string
}


defineProps<drawer>()
const kai = () => drawer.value = true
const guan = () => drawer.value = false
defineExpose({
    kai,
    guan,
})
const closeHandler = () => {
    guan()
}
/*
 * 暴露方法
    kai 是否开启抽屉
    guan 是否关闭抽屉
    width 抽屉宽度
    title 标题
    lockScroll 是否在 Drawer 出现时将 body 滚动锁定
    closeOnPress 是否可以通过按下 ESC 关闭 Drawer
    :closeButton="true"
 */
</script>
<style lang='scss' scoped>
.header{
    width: 100%;
    height: 50px;
    position: absolute;
    border-bottom: 1px solid #333;
    left: 0;
    top: 0;
    padding-left: 20px;
    line-height: 50px;
    >.close{
        width: 50px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        position: absolute;
        right: 0;
        top: 0;
        font-size: 26px;
        cursor: pointer;
    }
}
.content{
    width: 100%;
    margin-bottom: 30px;
    margin-top: 30px;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bottom{
    width: 100%;
    height: 50px;
    position: absolute;
    background-color: #fff;
    left: 0;
    bottom: 0px;
    padding-left: 20px;
}

</style>